<template>
	<div class=box>
		<div>
			<input type="text" name="taskName" ref="teskref" 
			placeholder="请输入你的任务名称,按回车键确认2" @keyup.enter="addTask" 
			v-model="taskValue" class="inputText">
		</div>

		<ul class="taskList" v-show="taskArr.length != 0">
			<li v-for="(p,index) of taskArr" :key="index">
				<input type="checkbox" name="taskItemCheckbox" v-model="taskItemValue" :value="p">
				<span>{{p}}</span>
				<button @click="removeTaskItem(p, index)">删除</button>
			</li>
		</ul>
		<div class="complateDiv">
			<input type="checkbox" name="complateCheckbox" v-model="allChecked" @change="allCheckedMethod"> 
			<span>已完成{{taskItemValue.length}}/全部{{taskArr.length}}</span>
			<button @click="removeComplatedTask" v-if="taskItemValue.length > 0">清除已完成任务</button>
		</div>

	</div>
</template>

<script>
	export default {
		name: "recordForm",
		data() {
			return {
				taskValue: "", 	//输入框的value
				taskArr: [],	// 新增的任务会添加进该数组，该数组代表全部的任务
				taskItemValue: [], //与每一个input绑定的且选中的任务会添加进该数组
				allChecked: false //全选框是否勾选
			}
		},
		methods: {
			addTask(){
				// 获取表单中的value，然后添加到taskArr
				this.taskArr.unshift(this.taskValue)
				this.taskValue = ""
			},
			allCheckedMethod(){
				this.allChecked ? this.taskItemValue = this.taskArr : this.taskItemValue = []
			},
			removeComplatedTask() {
				this.taskArr = this.taskArr.filter(item => !this.taskItemValue.includes(item))
				
				this.taskItemValue = []
				this.allChecked = this.allChecked ? !this.allChecked : this.allChecked 
			},
			removeTaskItem(p, index) {
				var result  = confirm(`确认删除${p}吗?`);
				if(result) {
					this.taskArr.splice(index,1)
				}
			}
		}
		
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
		font-size: 16px;
		margin-top: 5px;
	}
	.box {
		display: flex;
		width: 520px;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 0 auto;
		border-radius: 5px;
		border: 1px gray solid;
	}
	input[type="checkbox"] {
		background-color: gray;
	}
	.inputText {
		width: 500px;
		height: 50px;
		border-radius: 5px;
		border: 1px solid skyblue;
		text-indent: 5px;
	}
	.inputText:focus {
		box-shadow: 0px 0px 20px skyblue;
	}
	.taskList, 
	.taskList li,
	.complateDiv {
		width: 500px;
	}

	.taskList {
		margin-top: 20px;
		border: 1px gray solid;
		list-style-type: none;
		overflow: hidden;
		border-radius: 5px;
	}

	.taskList li {
		border-bottom: 1px gray solid;
		vertical-align: middle;
	}

	.taskList li:last-child {
		border-bottom: 0;
	}

	input[name="taskItemCheckbox"] {
		margin: 10px;
	}
	.complateDiv {
		margin-bottom: 10px;
		vertical-align: middle;
		height: 30px;
		line-height: 30px;
	}

	.complateDiv input[name="complateCheckbox"] {
		margin-right: 15px;
	}

	button {
		float: right;
	}

	.taskList button{
		margin-right: 5px;
		display: none;
		background-color: red;
		border-radius: 2px;
		color: white;
		width: 80px;
	}

	.taskList li:hover {
		background-color: gray;
	}

	.taskList li:hover button{
		display: inline-block;
	}
</style>